<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"  import="java.util.*"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function searchObject(){
	$('#tt').datagrid('load',{
		searchTen: $('#searchTen').val(),
	});
}

jQuery(function() {
	$("#searchTen").autocomplete("search/searchHocKy_KHHT.jsp");
});

//check so tin chi
$.extend($.fn.validatebox.defaults.rules, {  
    tinChi: {  
        validator: function(value,param){
            return value == (parseInt($(param[0]).val()) - (parseInt($('#so_tc_bb').val()) + parseInt($('#so_tc_tc').val())));  
        },  
        message: 'Số tín chỉ = TC bắt buộc + TC tự chọn + TC điều kiện.'
    }  
});
$(function(){
	$('#tt').datagrid({  
	    view: detailview,  
	    detailFormatter:function(index,row){  
	        return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';  
	    },  
	    onExpandRow: function(index,row){  
	        $('#ddv-'+index).datagrid({  
	            url:'view/detailHocKyKHHT.jsp?id='+row.id_hoc_ky_khht,  
	            fitColumns:true,  
	            singleSelect:true,  
	            rownumbers:true,  
	            loadMsg:'',  
	            height:'auto',
	            columns:[[   
	                {field:'ma_mon_hoc',title:'Mã Môn'},  
	                {field:'ten_mon_hoc',title:'Tên Môn Học'},  
	                {field:'so_tc',title:'Số TC'}, 
	                {field:'ten_loai_nhom_mon',title:'Nhóm'}  
	            ]],  
	            onResize:function(){  
	                $('#tt').datagrid('fixDetailRowHeight',index);  
	            },  
	            onLoadSuccess:function(){  
	                setTimeout(function(){  
	                    $('#tt').datagrid('fixDetailRowHeight',index);  
	                },0);  
	            }  
	        });  
	        $('#tt').datagrid('fixDetailRowHeight',index);  
	    }  
	});
}); 

$(function(){  
    $('#id_khht_mau').combobox({  
        onChange:function (newValue, oldValue){  
            if(newValue !=null){  
            	$('#tt').datagrid('load', {
        			id : newValue,
        		});
            }  
        }  
    });  
});
	</script>
<style type="text/css">
#fm {
	margin: 0;
	padding: 5 0px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 7px;
}

.fitem label {
	display: inline-block;
	width: 150px;
}

.fitem input {
	display: inline-block;
	width: 250px;
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #888888;
    border-radius: 5px 5px 5px 5px;
    color: #222222;
    margin: 0 5px 0 0;
    padding: 3px 3px;
}
</style>
</head>
<body>
	<table id="tt" class="easyui-datagrid" style="width:800px;height:737px"
			url="HOC_KY_KHHTServlet"
			title=":: KẾ HOẠCH HỌC TẬP MẪU" toolbar="#tb"
			rownumbers="true" pagination="true" singleSelect="true" fitColumns="true">
		<thead>
			<tr>
				<th field="stt">STT</th>
				<th field="ten">Tên Kế Hoạch</th>
				<th field="ten_khht_mau">Kế Hoạch Học Tập Mẫu</th>
				<th field="so_tc">Số TC</th>
				<th field="so_tc_bb">Số TC BB</th>
				<th field="so_tc_tc">Số TC TC</th>
				<th field="so_tc_dk">Số TC ĐK</th>
			</tr>
		</thead>
	</table>
	
	<div id="tb" style="padding:5px">
		<div style="padding:5px">
		<div class="fitem">
				<input id="id_khht_mau" name="id_khht_mau" class="easyui-combobox" required="true" style="width:320px; height: 25px"
				url="view/loadKHHT_MAU.jsp"
            	valueField="id"
            	textField="ten"
            	panelHeight="250px">
            	<a href="#" class="easyui-linkbutton" plain="true" >Chọn KHHT Mẫu</a>
			</div> 
			
			<input class="search" id="searchTen" name="searchTen" type="text" placeholder="nhập tên kế hoạch cần tìm">
			<a href="#" class="easyui-linkbutton" iconCls="icon-searchs" plain="true" onclick="searchObject()">Tìm Kiếm</a>
		</div>
	</div>
</body>
</html>